<template>
	<div class="tab-chart">
		<div class="tab-chart__header">
			<div class="card__header">
				<span class="label">访问趋势</span>
			</div>
			<!--   -->
		</div>
		<div style="padding: 0 20px 20px">
			<el-radio-group v-model="tabs.active" border @change="refresh()">
				<el-radio-button
					:label="item.label"
					:value="item.value"
					v-for="(item, index) in tabs.list"
					:key="index"
					>{{ item.label }}</el-radio-button
				>
			</el-radio-group>
		</div>
		<div class="tab-chart__container">
			<v-chart :option="chartOption" autoresize />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useCool } from '/@/cool';

import moment from 'moment';
const { service } = useCool();

const tabs = reactive({
	active: '1000001:5',
	list: [
		{
			label: '活跃用户',
			value: '1000001:5'
		},
		{
			label: '访问次数',
			value: '1000001:6'
		},
		{
			label: '注册用户',
			value: '1000011:3'
		},
		{
			label: '累计注册用户',
			value: '9000099:9'
		},
		{
			label: '人均访问次数',
			value: '1000001:8'
		},
		{
			label: '人均停留时长',
			value: '1000001:7'
		}
	],
	select(value: string) {
		tabs.active = value;
		refresh();
	}
});

const chartOption = reactive({
	grid: {
		top: '40px',
		bottom: '40px',
		right: '20px',
		left: '80px',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: [] as string[],
		offset: 5,
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		}
	},
	yAxis: {
		type: 'value',
		offset: 20,
		splitLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLine: {
			show: false
		}
	},
	tooltip: {
		trigger: 'axis',
		formatter([{ axisValueLabel, value }]: any) {
			const d = tabs.list.find(e => e.value == tabs.active);
			return `${axisValueLabel} ${d?.label}：${value}人`;
		},
		axisPointer: {
			show: true,
			status: 'shadow',
			z: -1,
			type: 'shadow'
		}
	},
	series: [
		{
			type: 'line',
			barWidth: 15,
			name: '付款笔数',
			data: [] as number[],
			smooth: true,
			symbol: 'circle',
			itemStyle: {
				color: '#4165d7'
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(
					0,
					0,
					0,
					1,
					[
						{
							offset: 0,
							color: '#D1E5FF'
						},
						{
							offset: 1,
							color: '#FFFFFF'
						}
					],
					false
				)
			},
			label: {
				show: true,
				position: 'top',
				formatter({ data }: { data: number }) {
					if (data === 0) {
						return '';
					} else {
						return data;
					}
				}
			}
		}
	]
});

function refresh() {
	const req: Promise<{ datas: number[]; dates: string[] }> =
		service.user.analysis.getActiveTrends({
			metric: tabs.active
		});

	req.then(res => {
		let max = Math.max(...res.datas);
		if (max < 10) {
			max = 10;
		}
		// 数据
		chartOption.series[0].data = res.datas;
		// 日期
		chartOption.xAxis.data = res.dates.map((e: string) => {
			e = moment(e).format('yyyy-MM-DD');
			const [_, b, c] = e.split('-');
			return `${b}-${c}`;
		});
	});
}

onMounted(() => {
	refresh();
});
</script>

<style lang="scss" scoped>
.tab-chart {
	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 20px 0 0;

		ul {
			li {
				list-style: none;
				float: left;
				margin-right: 20px;
				font-size: 15px;
				color: #dbdbdb;
				cursor: pointer;

				&.active {
					color: #000;
					font-weight: bold;
				}
			}
		}
	}

	&__container {
		height: 500px;
		padding: 0 15px;

		.echarts {
			height: 100%;
			width: 100%;
		}
	}
}
</style>
